    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伸缩布局-携程</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }

            a{
                text-decoration: none;
                color: #090909;
            }
            img{
                display: block;
                width: 100%;
                height: 250px;
            }
            .iterm .content .iterm1{ 
                height: 100px;
                display: flex;
                width: 50%;
                border-radius: 20px;
                background-color: deeppink;
                margin: 5px auto;
            }
            .iterm .content .iterm1 .left{
                flex: 1;
                border-right: 1px solid #FFFFFF;
                border-bottom:1px solid #FFFFFF ;
            }
            .iterm .content .iterm1 .right{
                flex: 2;
            }
            .iterm .content .iterm1 .right a{
                text-align: center;
                display: inline-block;
                height: 50%;
                width: 50%;
                float: left;
                line-height: 45px;
                border-right: 1px solid #FFFFFF;
                border-bottom:1px solid #FFFFFF ;
                box-sizing: border-box;
            }
            .content .iterm1:nth-child(2){
                background-color: #00FF00;
            }
            .content .iterm1:nth-child(3){
                background-color: #0AB6C3;
            }
            .content .iterm1:nth-child(4){
                background-color: #f5d950;
            }
            .iterm .left{
                font-size: 36px;
                text-align:center ;
                line-height: 95px;
                color: #cccccc;
            }
            .footer{
                width: 50%;
                margin: 50px auto;
            }
            .footer ul{
                display: flex;

                text-align: center;
            }
            .footer ul li{
                flex: 1;
                list-style: none;
                background-color: #01AAED;
                margin-right: 10px;
            }
            .footer p{
                margin-top: 35px;
                display: flex;
                text-align: center;
                flex-direction: column;
                background-color: #1378ae;
                border-radius: 50%;
            }
            .footer p a{
                flex: 1;
                margin-bottom: 20px;
                background-color: #00FF00;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <a href="#">
            <img src="1.jpg" alt="">
        </a>
    </div>
    <nav>
        <div class="iterm">
            <div class="header"></div>
            <div class="content">
                <div class="iterm1">
                    <div class="left" style="font-size: 36px">我爱你中国</div>
                    <div class="right">
                        <a href="#">overseaHotel</a>
                        <a href="#">TeamBuy</a>
                        <a href="#">CheapHotel</a>
                        <a href="#">ApartMent</a>
                    </div>
                </div>
                <div class="iterm1">
                    <div class="left" style="font-size: 36px">我爱你中国</div>
                    <div class="right">
                        <a href="#">overseaHotel</a>
                        <a href="#">TeamBuy</a>
                        <a href="#">CheapHotel</a>
                        <a href="#">ApartMent</a>
                    </div>
                </div>
                <div class="iterm1" style="font-size: 36px">
                    <div class="left">我爱你中国</div>
                    <div class="right">
                        <a href="#">overseaHotel</a>
                        <a href="#">TeamBuy</a>
                        <a href="#">CheapHotel</a>
                        <a href="#">ApartMent</a>
                    </div>
                </div>
                <div class="iterm1">

                    <div class="right">
                        <a href="#">overseaHotel</a>
                        <a href="#">TeamBuy</a>
                        <a href="#">CheapHotel</a>
                        <a href="#">ApartMent</a>
                    </div>
                </div>
            </div>
            <div class="footer">
                <ul>
                    <li>关羽</li>
                    <li>张飞</li>
                    <li>刘备</li>
                </ul>
                <p >
                    <a class="mod_copyright_auth_ico mod_copyright_auth_ico_2" href="#"  >可信网站信用评估</a>
                    <a class="mod_copyright_auth_ico mod_copyright_auth_ico_3" href="#" target="_blank" >网络警察提醒你</a>
                    <a class="mod_copyright_auth_ico mod_copyright_auth_ico_4" href="#" >诚信网站</a>
                    <a class="mod_copyright_auth_ico mod_copyright_auth_ico_5" href="#" target="_blank" >中国互联网举报中心</a>
                    <a class="mod_copyright_auth_ico mod_copyright_auth_ico_6" href="#" target="_blank" >网络举报APP下载</a>
                </p>
            </div>

        </div>
    </nav>
    </body>
    </html>